<template>
	<div class="tab-list table-theme">
		<head-title title="设置--平台物流"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="statusList"
						:value="status"
						placeholder="排序"
						type="status"
						@value="setSelectValue"
					>
					</select-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="optionList" @value="goSearch" @clear="refreshPage"></search-view>
					<div class="add"><el-button type="primary" @click="add">添加</el-button></div>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="tabList" border>
				<el-table-column label="序号" align="center" prop="address_id"></el-table-column>
				<el-table-column label="名称" align="center" prop="company_name"></el-table-column>
				<el-table-column label="联系人" align="center" prop="contacts_name"></el-table-column>
				<el-table-column label="联系电话" align="center" prop="contacts_phone"></el-table-column>
				<el-table-column label="联系地址" align="center" min-width="200">
					<template #default="{ row }">
						{{row.province}}{{row.city}}{{row.area}}{{row.address}}
					</template>
				</el-table-column>
				<el-table-column label="状态" align="center" width="180">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.address_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="备注" align="center" prop="brief" show-overflow-tooltip></el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time" width="165"></el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.address_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>

		<!-- 添加导航弹框 -->
		<el-dialog :title="title" :visible.sync="addDialog" width="500px" center :modal-append-to-body="false">
			<el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="90px">
				<el-form-item label="名称:" prop="company_name"><el-input v-model="addForm.company_name" placeholder="请输入名称" clearable></el-input></el-form-item>
				<el-form-item label="联系人:" prop="contacts_name"><el-input v-model="addForm.contacts_name" placeholder="请输入联系人" clearable></el-input></el-form-item>
				<el-form-item label="联系电话:" prop="contacts_phone"><el-input v-model="addForm.contacts_phone" placeholder="请输入联系电话" clearable></el-input></el-form-item>
				<el-form-item label="联系地址:" prop="province_id">
					<el-cascader
						v-model="region_id"
						:options="regionList"
						:props="{children:'cities',value:'areaId',label:'areaName'}"
						style="width:100%"
						size="medium"
						@change="areaChange"
						placeholder="请选择联系地址"
					></el-cascader>
				</el-form-item>
				<el-form-item label="详细地址:" prop="address"><el-input v-model="addForm.address" placeholder="请输入详细地址" clearable></el-input></el-form-item>
				<el-form-item label="备注:"><el-input type="textarea" v-model="addForm.brief" placeholder="请输入名称" clearable></el-input></el-form-item>
				<el-form-item label="上下架:" prop="status"><el-switch v-model="addForm.status" :active-value="1" :inactive-value="2"></el-switch></el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="submit('addForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import SelectView from "@/components/SelectView";
export default {
	components:{
		SelectView
	},
	data() {
		return {
			optionList: [
				{
					value: 0,
					label: '名称',
					key: 'company_name',
				}
			],
			searchContent: '',
			classSelect: '',
			title: '添加导航',
			submitType: '', // 提交的类型 0 增加 1编辑
			addDialog: false,
			tabList: [],
			total: 0,totalData: 0, 
			status: 1,
			statusList: [
				{
					value: 1,
					label: '上架'
				},
				{
					value: 2,
					label: '下架'
				}
			],
			region_id: [],
      regionList: require('@/utils/city.json'),
			page: 0,
			addForm: {
				company_name: '',
				contacts_name: '',
				contacts_phone: '',
				province_id: '',
				city_id: '',
				area_id: '',
				address: '',
				brief: '',
				status: 1	
			},
			addFormRules: {
				company_name: [{ required: true, message: '请输入名称',trigger: 'blur', }],
				contacts_name: [{ required: true, message: '请输入联系人',trigger: 'blur' }],
				contacts_phone: [{ required: true, message: '请输入联系人',trigger: 'blur' }],
				province_id: [{ required: true, message: '请选择联系地址',trigger: 'change' }],
				address: [{ required: true, message: '请输入详细地址',trigger: 'blur' }]
			}
		};
	},
	methods: {
		areaChange(e){
      this.addForm.province_id = e[0]
      this.addForm.city_id = e[1]
      this.addForm.area_id = e[2]
    },
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				status: this.status
			};
			if(this.classSelect!==''){
        data[this.optionList[this.classSelect].key] = this.searchContent
      }
			this.$http(this.$ApiList.PlatformLogisticsList, data).then(res => {
				this.tabList = res.datas.data;
				this.total = res.datas.count;
			});
		},

		// 上下架
		async upDown(e, address_id) {
			try{
				let data = {
					status: e,
					address_id: address_id
				};
				await this.$http(this.$ApiList.PlatformLogisticsDown, data)
				this.$layer.msg('操作成功');
				this.init()
			}catch{
				this.init()
			}
		},
		// 搜素
		goSearch(type, value) {
			this.searchContent = value;
			this.classSelect = type;
			this.init();
		},
		// 添加导航
		add() {
			this.title = '添加';
			this.submitType = 0;
			this.addDialog = true;
			this.$nextTick(() => {
				this.$refs.addForm.clearValidate();
			});
		},
		// 删除
		del(id) {
			this.$confirm('您确定要删除当前联系信息吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					let data = {
						address_id: id
					};
					this.$http(this.$ApiList.PlatformLogisticsDel, data).then(res => {
						this.$layer.msg('删除成功');
						this.init();
					});
				})
				.catch(() => {});
		},
		cancel(){
			this.addDialog = false
			this.addForm = this.$options.data().addForm
		},
		// 编辑
		edit(content) {
			this.title = '编辑';
			for(let i in this.addForm){
				this.addForm[i] = content[i]
			}
			this.region_id = [content.province_id,content.city_id,content.area_id]
			this.addForm.address_id = content.address_id
			this.submitType = 1
			this.addDialog = true;
		},
		// 刷新
		refreshPage() {
			this.page = 1;
			this.status = 1;
			this.searchContent = '';
			this.init();
		},
		submit(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					// submitType 0新增 1编辑
					if (this.submitType == 0) {
						this.$http(this.$ApiList.UpPlatformLogistics, this.addForm).then(res => {
							this.$layer.msg('添加成功');
							this.addDialog = false;
							this.addForm = this.$options.data().addForm
							this.init();
						});
					} else {
						this.$http(this.$ApiList.UpdatePlatformLogistics, this.addForm).then(res => {
							this.$layer.msg('编辑成功');
							this.addForm = this.$options.data().addForm
							this.addDialog = false;
							this.init();
						});
					}
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		goCardList(id) {
			this.$router.push({ path: '/card_tab_list', query: { id: id } });
		},
		setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'status':
						this.status = value
						break;
					default:
						break;
				}
				this.init()
			}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss" scoped>

</style>
